<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>焦点轮播图</title>
  <style type="text/css">
    /*去除内边距,没有链接下划线*/
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }

    /*让<body有20px的内边距*/
    body {
      padding: 20px;
    }

    /*最外围的div*/
    #container {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative; /*相对定位*/
      margin: 0 auto;
    }

    /*包含所有图片的<div>*/

    #list {
      width: 4200px; /*7张图片的宽: 7*600 */
      height: 400px;
      position: absolute; /*绝对定位*/
      z-index: 1;
      left: 0px;
    }

    /*所有的图片<img>*/
    #list img {
      float: left; /*浮在左侧*/
    }

    /*包含所有圆点按钮的<div>*/
    #pointsDiv {
      position: absolute;
      height: 10px;
      width: 100px;
      z-index: 2;
      bottom: 20px;
      left: 250px;
    }

    /*所有的圆点<span>*/

    #pointsDiv span {
      cursor: pointer;
      float: left;
      border: 1px solid #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #333;
      margin-right: 5px;
    }

    /*第一个<span>*/

    #pointsDiv .on {
      background: orangered;
    }

    /*切换图标<a>*/

    .arrow {
      cursor: pointer;
      display: none;
      line-height: 39px;
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 2;
      top: 180px;
      background-color: RGBA(0, 0, 0, 0.3);
      color: #fff;
    }

    /*鼠标移到切换图标上时*/
    .arrow:hover {
      background-color: RGBA(0, 0, 0, 0.7);
    }

    /*鼠标移到整个div区域时*/
    #container:hover .arrow {
      display: block; /*显示*/
    }

    /*上一个切换图标的左外边距*/
    #prev {
      left: 20px;
    }

    /*下一个切换图标的右外边距*/
    #next {
      right: 20px;
    }
  </style>
</head>

<body>

<div id="container">
  <div id="list" style="left: -600px">
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
    <img src="img/2.jpg" alt="2"/>
    <img src="img/3.jpg" alt="3"/>
    <img src="img/4.jpg" alt="4"/>
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
  </div>
  <div id="pointsDiv">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow">&lt;</a>
  <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript">
        /*
       功能说明:
       1. 点击向右(左)的图标, 平滑切换到下(上)一页
       2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
       3. 每隔3s自动滑动到下一页
       4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
       5. 切换页面时, 下面的圆点也同步更新
       6. 点击圆点图标切换到对应的页
       7. bug :快速点击的时候产生的bug 当前正在翻页的时候，不执行翻页函数

       */
        //准备需要使用的变量
        $(function () {
          var $container = $('#container')
          var $list = $('#list')
          var $points = $("#pointsDiv>span")
          var $prev = $('#prev')
          var $next = $('#next')
          var setof = 600 //偏移量
          var Alltime = 400 //总共翻页花费的时间
          var Intem_time = 20 //间隔时间
          var imgCount = $points.length //图片的个数
          var index = 0 //表示当前显示图片的下标和变红原点的下标
          var moving = false //表示最初的状态没有在翻页
          // 1. 点击向右(左)的图标, 平滑切换到下(上)一页
          $next.click(function () {
            Page(true)
          })
          $prev.click(function () {
            Page(false)
          })
        //3 每隔两秒钟自动翻页，是下一页
         var interid = setInterval(function () {
              Page(true)
          },2000)
         // 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
          $container.hover(function () {
            //移入的时候，停止定时器
              clearInterval(interid)
          },function () {
            //移出的时候，开始定时器
            interid = setInterval(function () {
              Page(true)
            },2000)
          })
          // 5. 切换页面时, 下面的圆点也同步更新 updatePoints(next)
          // 6  点击圆点图标切换到对应的页
          $points.click(function () {
            //进行翻页 1:求出目标的下标
            var targetindex = $(this).index()
            //目标下标不等于当前显示的下标
            if(targetindex != index)
            {
              Page(targetindex)
            }
          })

      //next参数为3中情况
      // （1） true next->
      // （2） false pre->
      //  （3） 数值 //需要瞬间翻页


        function Page(next) {
           /* //
         //获取当前的left的值
          var currentleft = $list.position().left
          //需要偏移的数值
          瞬间翻页
          var offset = next?-setof:+setof
          $list.css('left',offset+currentleft)*/
        //使用定时器实现平滑翻页
          //获取当前的left的值
          //偏移量
          if(moving)
          {
            return  //正在翻页的时候取消翻页
          }
          //运行函数的时候表示正在翻页
          moving = true
          var offset = 0
          if(typeof next === 'boolean')
          {
            offset = next ? -600 : 600;
          }
          else {
            // 2 0 offset 为 负值
            // 0 2 offset 为 正
            offset = -(next-index)* setof
          }
          var currentleft = $list.position().left
          //targetleft 目标的距离
          var targetleft = offset +currentleft
          //单次移动的短距离
          var Itme_left = offset/(Alltime/Intem_time)
          var InteralID = setInterval(function () {
              currentleft += Itme_left
            if(currentleft === targetleft)
            {
              clearInterval(InteralID)
              //翻页完成的时候 //停止翻页
              moving = false
               //当图片到达了做右边图片的时候（1.jpg）,已到左边的第二张图片（1.jpg）
              if(currentleft == (-(imgCount+1)*setof)) //当到达最右边 -3600px的时候
              {
                currentleft = -setof
              }else if(currentleft === 0){
                currentleft = -imgCount*setof
              }


            }
            $list.css('left',currentleft)
          },20) //到达下一页
          updatePoints(next) //当前只考虑了boolean类型


        }
        function  updatePoints(next) {
             //1:计算出目标原点
          var targetindex = 0
          if(typeof next === "boolean")
          {
            if(next){
              //为真
              targetindex = index + 1
              if(targetindex === imgCount)//为最后一张1.jpg的时候 ，span的index = 0
              {
                targetindex = 0
              }

            }else {
              targetindex = targetindex -1
              if(targetindex === -1)
              {
                targetindex = imgCount - 1
              }
              // 最左边的图片的时候 targetindex = 4
            }
          }else
          {
            targetindex = next
          }


           //将当前下标span class属性 移出
          $points.eq(index).removeClass("on")
         // $points[index].className = ""
          //给目标原点加入
          $points.eq(targetindex).addClass('on')
          //更新index
          index = targetindex
        }
        })

</script>

</body>

</html>